<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FILA｜斐乐官方网站(CN)</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/home.css">
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="header-wrap">
            <h1><img src="./images/fila_blue_150.png" alt="" class="dom_center"></h1>
            <div class="header-right">
                <input type="text" placeholder="短袖"><button>搜索</button>
                <a href="/register.html" class="enter">登入</a>
                <a href="/login.html" class="login">注册</a>
                <a href="/shopping.html" class="shop_cart"><img src="./images/cart-blue.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div class="con-nav">
        <ul class="nav">
            <h4><a href="/list.html">秋季新品</a></h4>
            <li class="navList"><a href="#">女士</a></li>
            <ol class="show">
                <li><a href="/list.html">T恤上衣</a></li>
                <li><a href="/list.html">POLO衫</a></li>
                <li><a href="/list.html">卫衣</a></li>
                <li><a href="/list.html">外套</a></li>
                <li><a href="/list.html">连衣裙</a></li>
                <li><a href="/list.html">包包配饰</a></li>
                <li><a href="/list.html">运动鞋</a></li>
            </ol>
            <li class="navList"><a href="#">男士</a></li>
            <ol class="show">
                <li><a href="">T恤上衣</a></li>
                <li><a href="">POLO衫</a></li>
                <li><a href="">卫衣</a></li>
                <li><a href="">外套</a></li>
                <li><a href="">连衣裙</a></li>
                <li><a href="">包包配饰</a></li>
                <li><a href="">运动鞋</a></li>
            </ol>
            <li class="navList"><a href="#">儿童</a></li>
            <ol class="show">
                <li><a href="">T恤上衣</a></li>
                <li><a href="">POLO衫</a></li>
                <li><a href="">卫衣</a></li>
                <li><a href="">外套</a></li>
                <li><a href="">连衣裙</a></li>
                <li><a href="">包包配饰</a></li>
                <li><a href="">运动鞋</a></li>
            </ol>
            <h4 class="fuslou"><a href="#"> FUSLOU </a></h4>
        </ul>
        <p class="hepl">帮助中心</p>
        <p class="serve">+购物服务</p>
        <p class="fila">+关于FILA</p>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="banner-wrap">
            <a href="#"><img src="./images/index200723_ADE.webp" alt=""></a>
            <a href="#"><img src="./images/index200723_Philliplim.webp" alt=""></a>
            <a href="#"><img src="./images/index200805_baseball.webp" alt=""></a>
            <a href="#"><img src="./images/index200805_filakids.webp" alt=""></a>
        </div>
    </div>
    <!-- 底部 -->
    <div id="foot">
        <div class="foot-wrap">
            <ul class="float_left">
                <li><a href="">购物服务</a></li>
                <li><a href="">关于品牌</a></li>
                <li><a href="">查找门店</a></li>
                <li>关注FLIA官方媒体:
                    <a href="" class="microblog"></a>
                    <a href="" class="WeChat"></a>
                </li>
                <li>售后服务电话：400-886-7699</li>
            </ul>
            <div class="foot_right float_right">
                <p>©FILA体育 闽ICP备11020421号-8 闽公网安备35020302033807号</p>
                <p>©2020 FILA Luxembourg S.à.r.l. - All Rights Reserved -</p>
            </div>
        </div>
    </div>
    <div class="service">
        <a href="">客服</a>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/public.js"></script>
    <script>
        // $(function(){
        //     $(".navList").click(function(){
        //         let olList = $(".nav").find("ol")
        //         olList.eq($(this).index()).toggle()
        //         console.log($(this).index())
        //     })
        // })
    //    var liList = document.getElementsByClassName("navList")
    //    var olList = document.getElementsByClassName("show")
    //    for(var i = 0;i < liList.length;i++){
    //        liList[i].index = i
    //        liList[i].onclick = function(){
    //             var n = olList[this.index]
    //             console.log(n)
    //             if(n.style.display === "block"){
    //                 n.style.display = "none"
    //             }else{
    //                 for(var j = 0;j < olList.length;j++){
    //                     olList[j].style.display = "none"
    //                 }
    //                 olList[this.index].style.display = "block"
    //             }
    //        }
    //    }
    // 轮播图
        $(function(){
            let n = 0
            let imgList = $(".banner-wrap a img")
            setInterval(function(){

            //    $(".banner-wrap a img").mousedown(function(){
                   n++
                   if(n === imgList.length){
                       n = 0
                   }
                   $(".banner-wrap").animate({
                       marginLeft: -(n *1293)
                //    },1000)
                   
               })
           },3000)

        })
    </script>
</body>

</html>